'use client'

import { useRouter, usePathname } from 'next/navigation'
import Link from 'next/link'

interface DashboardLayoutProps {
  children: React.ReactNode
}

function Navbar() {
  const router = useRouter()
  const pathname = usePathname()

  const menuItems = [
    { path: '/dashboard', label: '仪表盘' },
    { path: '/devices', label: '设备管理' },
    { path: '/scenes', label: '场景管理' }
  ]

  const handleLogout = async () => {
    try {
      const res = await fetch('/api/auth/logout', {
        method: 'POST'
      })
      if (res.ok) {
        router.push('/login')
      }
    } catch (error) {
      console.error('退出登录失败:', error)
    }
  }

  return (
    <div className="fixed top-0 left-0 h-full w-64 bg-background-paper/50 backdrop-blur-lg border-r border-white/10">
      <div className="p-6">
        <h1 className="text-2xl font-bold text-white">智能家居系统</h1>
      </div>
      <ul className="mt-6 space-y-2">
        {menuItems.map(item => (
          <li key={item.path}>
            <Link 
              href={item.path}
              className={`flex items-center px-6 py-3 transition-colors
                ${pathname === item.path 
                  ? 'bg-primary-500/20 text-primary-300 border-r-2 border-primary-500' 
                  : 'text-white/70 hover:text-white hover:bg-white/5'}`}
            >
              <span>{item.label}</span>
            </Link>
          </li>
        ))}
        <li>
          <button
            onClick={handleLogout}
            className="w-full flex items-center px-6 py-3 text-white/70 hover:text-white hover:bg-white/5 transition-colors"
          >
            <span>退出登录</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  return (
    <div className="min-h-screen bg-background-default">
      {/* 动态背景 */}
      <div className="fixed inset-0 z-0">
        <div className="absolute inset-0 bg-gradient-to-br from-primary-900/30 to-transparent" />
        <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-10" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,183,255,0.1)_0%,transparent_100%)]" />
      </div>

      {/* 主要内容 */}
      <div className="relative z-10">
        <Navbar />
        <main className="ml-64 p-8">
          <div className="bg-background-paper/30 backdrop-blur-xl border border-white/10 rounded-xl p-8 shadow-2xl">
            {children}
          </div>
        </main>
      </div>
    </div>
  )
} 